<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <!-- 签约信息 -->
  <view class="Mall4j page-store-settings-contract">
    <!-- 类目 -->
    <view class="contract-container">
      <view class="head">
        <view class="tit">
          签约类目
        </view>
        <view class="tips">
          （已签约<text class="stress">
            {{ categoryList.length }}
          </text>个类目，
          最多可添加<text class="stress">
            {{ maxNumOfCategories }}
          </text>个）
        </view>
      </view>
      <view class="table-box">
        <view class="tb-head">
          <view class="tb-head-td">
            类目名称
          </view>
          <view class="tb-head-td">
            上级类目
          </view>
          <view class="tb-head-td">
            类目扣率
          </view>
          <view class="tb-head-td">
            经营资质
          </view>
          <view class="tb-head-td">
            类目状态
          </view>
        </view>
        <view class="tb-body">
          <view
            v-for="item in categoryList"
            :key="item.categoryId"
            class="tb-row"
          >
            <view class="tb-row-td">
              {{ item.name }}
            </view>
            <view class="tb-row-td">
              {{ item.parentName }}
            </view>
            <view class="tb-row-td">
              {{ item.customizeRate ?item.customizeRate: item.platformRate }}%
            </view>
            <view class="tb-row-td">
              <view
                v-if="item.qualifications"
                scroll-x
                class="scroll-img"
              >
                <view
                  v-for="(value,idex) in item.qualifications"
                  :key="idex"
                  class="td-img"
                >
                  <img-show
                    :src="value"
                    @handle-tap="()=>previewImgArray(item.qualifications,value)"
                  />
                </view>
              </view>
              <block v-if="!item.qualifications">
                /
              </block>
            </view>
            <view
              v-if="item.categoryStatus === 1"
              class="tb-row-td"
            >
              正常
            </view>
            <view
              v-if="item.categoryStatus === 0"
              class="tb-row-td"
            >
              下架
            </view>
            <view
              v-if="item.categoryStatus === -1"
              class="tb-row-td"
            >
              已删除
            </view>
          </view>
          <!-- 空 -->
          <view
            v-if="!categoryList.length"
            class="tb-row empty"
          >
            暂无已签约类目
          </view>
        </view>
      </view>
    </view>
    <!-- 品牌 -->
    <view class="contract-container">
      <view class="head">
        <view class="tit">
          签约品牌
        </view>
        <view class="tips">
          （已签约<text class="stress">
            {{ brandList.length }}
          </text>个品牌，
          最多可添加<text class="stress">
            {{ maxNumOfBrands }}
          </text>个）
        </view>
      </view>
      <view class="table-box">
        <view class="tb-head">
          <view class="tb-head-td">
            品牌名称
          </view>
          <view class="tb-head-td">
            检索首字母
          </view>
          <view class="tb-head-td">
            品牌logo
          </view>
          <view class="tb-head-td">
            授权文件
          </view>
          <view class="tb-head-td">
            品牌状态
          </view>
        </view>
        <view class="tb-body">
          <view
            v-for="item in brandList"
            :key="item.categoryId"
            class="tb-row"
          >
            <view class="tb-row-td">
              {{ item.name }}
            </view>
            <view class="tb-row-td">
              {{ item.firstLetter }}
            </view>
            <view class="tb-row-td">
              <view class="td-img">
                <img-show
                  :src="item.imgUrl"
                  @handle-tap="()=>previewImg(item.imgUrl)"
                />
              </view>
            </view>
            <view class="tb-row-td">
              <view class="scroll-img">
                <view
                  v-for="(value,idex) in item.qualifications"
                  :key="idex"
                  class="td-img"
                >
                  <img-show
                    :src="value"
                    @handle-tap="()=>previewImgArray(item.qualifications,value)"
                  />
                </view>
              </view>
            </view>
            <view class="tb-row-td">
              {{ item.brandStatus === 1 ? '正常' : '下架' }}
            </view>
          </view>
          <!-- 空 -->
          <view
            v-if="!brandList.length"
            class="tb-row empty"
          >
            暂无已签约品牌
          </view>
        </view>
      </view>
    </view>
    <!-- 有效期 -->
    <view
      v-if="shopStatus !== 4 && shopStatus !== 5 && paySettlementType !== 1"
      class="contract-container"
    >
      <view class="head">
        <view class="tit">
          签约有效期
        </view>
        <view class="tips">
          （商家店铺有效期）
        </view>
      </view>
      <view class="input-box">
        <view class="date-int">
          {{ timeRange[0] }}
        </view>
        <view class="to">
          至
        </view>
        <view class="date-int">
          {{ timeRange[1] || '无固定期限' }}
        </view>
        <image
          src="/static/images/date-icon.png"
          class="date-icon"
        />
      </view>
    </view>
    <!-- 店铺类型 -->
    <view
      v-if="shopStatus !== 4 && shopStatus !== 5"
      class="contract-container"
    >
      <view class="head">
        <view class="tit">
          店铺类型
        </view>
      </view>
      <view class="radio-box">
        <radio-group>
          <radio
            value="0"
            color="#082BA6"
            :checked="shopType === 0"
            :disabled="shopType !== 0"
            style="transform:scale(0.8);"
            :class="{'disabled': shopType !== 0}"
          >
            <text class="radio-txt">
              普通店铺
            </text>
          </radio>
          <radio
            value="1"
            color="#082BA6"
            :checked="shopType === 1"
            :disabled="shopType !== 1"
            style="transform:scale(0.8);"
            :class="{'disabled': shopType !== 1}"
          >
            <text class="radio-txt">
              优选好店
            </text>
          </radio>
        </radio-group>
      </view>
    </view>

    <view class="footer">
      <view class="warm-tips">
        温馨提示：申请签约类目和签约品牌请前往PC端操作。
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util'
import defPng from '@/static/images/def.png'
const paySettlementType = uni.getStorageSync('bbcPaySettlementType')

// 最大可签约类目数量
const maxNumOfCategories = 200
// 最大可签约品牌数量
const maxNumOfBrands = 50
// 类目列表
const categoryList = ref([])
// 品牌列表
const brandList = ref([])
// 签约有效期
const timeRange = ref([])
// 店铺类型 0普通店铺 1优选好店
const shopType = ref(0)
const shopStatus = ref(4)
onShow(() => {
  uni.showLoading()
  Promise.all([getbrandList(), getcategoryList(), getInfo()])
    .finally(() => {
      uni.hideLoading()
    })
})
/**
 * 获取类目列表
 */
const getcategoryList = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/prod/category/listSigningCategory',
      method: 'GET',
      data: {
        status: 1
      },
      hasCatch: true
    }
    http.request(params).then(({ data: res }) => {
      res.forEach(element => {
        if (element.qualifications) {
          element.qualifications = element.qualifications.split(',')
        }
      })
      categoryList.value = res
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}
/**
 * 获取品牌列表
 */
const getbrandList = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/admin/brand/listSigningBrand',
      method: 'GET',
      data: {
        status: 1
      },
      hasCatch: true
    }

    http.request(params).then(({ data: res }) => {
      res = [...res.customizeBrandList, ...res.platformBrandList]
      res.forEach(element => {
        if (element.qualifications) {
          element.qualifications = element.qualifications.split(',')
        }
      })
      brandList.value = res
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}
/**
 * 获取店铺基本信息
 */
const getInfo = () => {
  return new Promise((resolve, reject) => {
    const params = {
      url: '/shop/shopDetail/info',
      method: 'GET',
      hasCatch: true
    }
    http.request(params).then(({ data: res }) => {
      timeRange.value = [res.contractStartTime?.split(' ')[0], res.contractEndTime?.split(' ')[0]]
      shopType.value = res.type
      shopStatus.value = res.shopStatus
      resolve()
    }).catch(() => {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject()
    })
  })
}

/**
 * 单张图片预览
 * @param {String} src 图片路径
 */
const previewImg = (src) => {
  if (src === defPng) {
    uni.showToast({
      title: '当前图片已失效',
      icon: 'error',
      duration: 1000
    })
  } else {
    uni.previewImage({
      urls: [src]
    })
  }
}

/**
 * 图片预览
 * @param {Array} urls 需要预览的图片链接列表
 * @param {String} current 为当前显示图片的链接
 *
 */
const previewImgArray = (urls, current) => {
  if (current === defPng) {
    return uni.showToast({
      title: '当前图片已失效',
      icon: 'error',
      duration: 1000
    })
  }

  uni.previewImage({
    current,
    urls: urls.map(el => util.checkFileUrl(el))
  })
}

</script>

<style lang="scss" scoped>
@use './store-settings-contract.scss';
</style>
